<div class="main-area">
   <?php $this->load->view('template/block/slideshow'); ?>

    <div class="welcome floatLeft">Xin chào <span><?php echo ($this->session->userdata('fullname_mem') ? $this->session->userdata('fullname_mem') : $this->session->userdata('username_mem') ? $this->session->userdata('fullname_mem') ? $this->session->userdata('fullname_mem') : $this->session->userdata('username_mem') : 'Khách')?></span> | <a style="font-weight: bold;color: #6b4114" href="<?php echo $baseurl.'thoat.html'?>"><?php echo $this->session->userdata('username_mem') ? 'Thoát' : 'Đăng nhập'?></a></div>
    <div class="floatRight change-desktop">
         <?php if($this->session->userdata('changepass') == 1):?>
         <a class="btn btn-change" style="max-width: 100%;" href="<?php echo $baseurl.'doi-mat-khau.html'?>"></a>
         <?php endif;?>
    </div>

    <div class="clear"></div>
    <div class="avatar" style="<?php $data->avatar ? $data->avatar : 'background: url("'.$baseurl.'public/theme/version-2.0/images/avatar.png");'?>;">
        <input style="top: 0;opacity: 0;position: absolute;height: 100%;width: 100%;cursor: pointer" onchange="loadImageFileAsURL(1);" id="photo1" type="file" name="photo" accept="image/*" capture="camera"/>
    </div>		
    <div class="user-info">
        <p><label>Tên:</label> <span><input class="input-edit" id="fullname" name="fullname" readonly="true" value="<?php echo $data? $data->fullname : 'Chưa cập nhật'?>" /></span> <?php if($this->session->userdata('role') == 'member'):?><button class="btn edit edituser"></button><?php endif;?></p>
        <p><label>Email:</label> <span><input class="input-edit" id="email" name="email" readonly="true" value="<?php echo $data ? $data->email : 'Chưa cập nhật'?>" /></span> <?php if($this->session->userdata('role') == 'member'):?><button class="btn edit edituser"></button><?php endif;?></p>
        <p><label>Địa chỉ:</label> <span><input class="input-edit" id="address" name="address" readonly="true" value="<?php echo $data ? $data->address : 'Chưa cập nhật'?>" /></span> <?php if($this->session->userdata('role') == 'member'):?><button class="btn edit edituser"></button><?php endif;?></p>
        <p><label>Điện thoại:</label> <span><input class="input-edit" id="mobile" name="mobile" readonly="true" value="<?php echo $data ? $data->mobile : 'Chưa cập nhật'?>" /></span> <?php if($this->session->userdata('role') == 'member'):?><button class="btn edit edituser"></button><?php endif;?></p>
        <p class="html_button"><button class="btn save_info"></button></p>
    </div>
    <div class="change-mobile"><a class="btn btn-change" href="#"></a></div>

    <script>

        function loadImageFileAsURL(chose)
        {
            var chose = chose;
            var filesSelected = document.getElementById("photo" + chose).files;
            if (filesSelected.length > 0)
            {
                var fileToLoad = filesSelected[0];
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent)
                {
                    var textAreaFileContents = document.getElementById
                            (
                                    "textAreaFileContents"
                                    );
                    localStorage.imgbase64 = fileLoadedEvent.target.result;
                    //$('.Avatar').css("background-image", "url(" + fileLoadedEvent.target.result + ")");
                    //$(".avatar img").attr("src",fileLoadedEvent.target.result);
                    $('.avatar').css('background', 'url(' + fileLoadedEvent.target.result + ')');

                    //$(".User_name").css({color: "#000000"});
                };

                fileReader.readAsDataURL(fileToLoad);
            }
        }
    </script>
    <script>
        $(function ($)
        {
            $(".edituser").click(function ()
            {
                _this = $(this);
                _this.parent('p').find('.input-edit').addClass('edit-input-info').attr('readonly', false);
                _this.parent('p').find('label').css('width', '30%');
                $(".html_button").show();
                $(".save_info").click(function () {
                    var fullname = $("#fullname").val();
                    if (fullname == "") {
                        fullname = 'Đang cập nhật';
                    }
                    var email = $("#email").val();
                    if (email == "") {
                        email = 'Đang cập nhật';
                    }
                    var address = $("#address").val();
                    if (address == "") {
                        address = 'Đang cập nhật';
                    }
                    var mobile = $("#mobile").val();
                    if (mobile == "") {
                        mobile = 'Đang cập nhật';
                    }
                    $('.input-edit').removeClass('edit-input-info').attr('readonly', true);
                     _this.parents('.user-info').find('label').css('width', 'auto');
                     $(".html_button").hide();
                     $.ajax({
                     type: "GET",
                     url: '<?php echo $baseurl.'ajax-update-info'?>',
                     data: {
                     fullname: fullname,
                     email: email,
                     address: address,
                     mobile: mobile,
                     },
                     success: function (data) {
                     if (data == 200) {
                     $(".notification").css("display", "block");
                     $(".content_notification").html("Cập nhật thành công");
                     $(".welcome span").html(fullname);
                     $('.input-edit').removeClass('edit-input-info').attr('readonly', true);
                     _this.parents('.user-info').find('label').css('width', 'auto');
                     $(".html_button").hide();
                     } else {
                     if (data == 201) {
                     return false;
                     }
                     }
                     }
                     }); // end ajax*/
                });
            });
        });

        if (localStorage.imgbase64) {
            $('.avatar').css('background', 'url(' + localStorage.imgbase64 + ')');
        } else {
            $('.avatar').css('background', '');
        }
    </script>
</div>